<template>
	<view :style="{'--color':color,'--diybg':diybg}">
		<view class="navBar" :class="['bgMake'+bgMake,'Color'+Color]" :style="{height:`${totalHeight}px`}">
			<view class="navTitle" :style="{width:`${navWidth}`,height:`${navHeight}px`}">
				
				<view class="Back flexac" v-if="Back" @click="headBack"
					:style="{width:`${navHeight}px`,height:`${navHeight}px`}">
					<view class="iconfont" :class="fromShare==0?'icon-back size32':'icon-shouye1 size42'"></view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="height " :style="{'width':`${capsuleWidth - navHeight}px`}" v-if="titlePos && Back"></view>
				
				<view class="height d-flex a-center" :style="{'width':`${capsuleWidth}px`}" v-if="titlePos && !Back && !city"></view>
				<!-- #endif -->
				<view class="d-flex a-center padding20" :style="{'width':`${capsuleWidth}px`}" v-if="city" @click="toUrl(`/pages/cityList/cityList`)">
					<view class="iconfont icon-a-zu3947 size28 color"></view>
					<text class="color size28 flex-1 ellipsis p-left10">{{City}}</text>
				</view>
				
				<text class="title" :class="{'m-left30 ':!Back && !titlePos,'flex-1 d-flex j-centert':titlePos }">{{title}}</text>
				<!-- #ifdef H5 -->
				  <view class="height"  :style="{'width':`${capsuleWidth}px`}" v-if="city"></view>
				  <view class="height"  :style="{'width':`${navHeight}px`}" v-if="Back"></view>
				<!-- #endif -->
			</view>
		</view>
		<view class="topBg" :style="{height:`${totalHeight}px`}" v-if="Bot"></view>
	</view>
</template>

<script>
	/*
	titlePos  
	   true  title 位置居中 
	   false title 位置居左
	bgMake
	  1、背景透明
	  2、背景白色
	  3、背景主题色
	  4、背景自定义 diyBg #ed7083
	  5、渐变
	 Color 字体颜色
	  1、白色
	  2、黑色
	  3、主题色
	  4、自定义颜色  diyColor #ed7083
	*/
	import {
		mapState
	} from 'vuex';
	export default {
		name: "navBar",
		props: {
			titlePos:{
				type:Boolean,
				default:true,
			},
			title: {
				default: '',
			},
			Back: {
				type: Boolean,
				default: true,
			},
			Bot: {
				type: Boolean,
				default: true,
			},
			bgMake: {
				type: Number,
				default: 1
			},
			diyBg: {
				type: String,
				default: ''
			},
			Color: {
				type: Number,
				default: 3
			},
			diyColor: {
				type: String,
				default: ''
			},
			fromShare:{
				type:Number,
				default:0
			},
			city:{
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				diybg: '',
				diycolor: '',
			};
		},
		methods: {
			headBack(){
				this.fromShare == 0?this.$back():this.$pageHome();
			}
		},
		computed: {
			...mapState(['navHeight', 'totalHeight', 'navWidth', 'color','capsuleWidth','City']),
		},
		watch: {
			diyBg: {
				immediate: true,
				handler(newVal) {
					if (newVal) this.diybg = newVal;
				}
			},
			diyColor: {
				immediate: true,
				handler(newVal) {
					if (newVal) this.diycolor = newVal;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navBar {
		width: 100%;
		display: flex;
		align-items: flex-end;
		position: fixed;
		top:0;
		left:0;
		z-index:8888;
	}

	.bgMake1 {
		background-color: transparent;
	}

	.bgMake2 {
		background-color: #ffffff;
	}

	.bgMake3 {
		background-color: var(--color);
	}

	.bgMake4 {
		background-color: var(--diybg);
	}
	.bgMake5 {
		background-image: linear-gradient(to top,$pageBg 0%, #f4e5e8 26%, #f2d4da 100%);
	}

	.Color1 {
		color: #ffffff;
	}

	.Color2 {
		color: #000000;
	}

	.Color3 {
		color: var(--color);
	}

	.Color4 {
		color: var(--diycolor);
	}

	.navTitle {
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
</style>